<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialog"
      :close-on-press-escape="false"
      modal-append-to-body
      append-to-body
      :close="close"
      :width='width'
      :close-on-click-modal="false"
      :before-close="close"
    >
      <slot name="content"></slot>
      <div
        slot="footer"
        v-if="!disabled"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSave()"
          size="small"
        ><i class="el-icon-circle-check ml0 mr10 el-icon--right"></i> {{ loading ? '提交中 ...' : '确 定' }}</el-button>
        <el-button
          size="small"
          @click="close"
        ><i class="el-icon-circle-close ml0 mr10 el-icon--right"></i> 取 消</el-button>

      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    disabled: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    width: {
      type: String,
      default: function () {
        return "760px";
      },
    },
    title: {
      type: String,
      default: function () {
        return "";
      },
    },
    loading: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    //关闭弹框
    close() {
      this.$emit("close");
    },
    //关闭loading
    closeLoading() {
      this.$emit("loading");
    },
    //提交保存
    handleSave() {
      this.$emit("handleSave");
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__title {
  font-weight: bold;
  font-size: 16px;
}
::v-deep .el-dialog__header {
  padding: 18px 20px;
}
::v-deep .el-dialog__headerbtn {
  top: 18px;
}
::v-deep .el-dialog__header {
  background: #f0f1f5;
}
::v-deep .el-dialog__footer {
  padding: 24px;
  text-align: center;
  border-top: 1px solid #d7d9db;
}
</style>